<template>
  <div class="box">
    <h1>绘制跟随鼠标移动的方块</h1>

    <!-- 让创建的ref对象-box，和ref属性进行绑定 -->
    <div class="moveBox" ref="box">
      <div class="move" :style="{left:pos.x+'px',top:pos.y+'px'}"></div>
    </div>
  </div>
</template>

<script>
// 1.引入hook函数
import points from "./points.js"
export default {
    setup(){
        console.log(points); //是一个函数，就一定要调用
        // let res = points(); //调用函数，返回两个
     
        // let box = res.box;
        // let pos =  res.pos;

        let {box,pos} = points(); //调用函数，并结构赋值

        return {
            box,
            pos
        }
    },
};
</script>

<style scoped>
  .moveBox{
    width: 500px;
    height: 500px;
    border: 2px solid red;
    margin: 0px auto;
    position: relative;
  }
  .move{
    width: 50px;
    height: 50px;
    background: teal;
    position: absolute;
  }
</style>